<template>
    <div>
<h2>排房列表显示</h2>
<table class="table table-bordered" border="1">
<tr>
    <td>房号</td>
    <td>房型</td>
    <td>排房日期</td>
    <td>所属房型预览图</td>
    <td>操作</td>
</tr>
<tr v-for="item in info.list">
    <td>{{item.orderName}}</td>
    <td>{{item.typeName}}</td>
    <td>{{moment(item.paiTime).format('YYYY-MM-DD')}}</td>
    <td><img :src="item.photo" alt="" width="60px" height="60px"></td>
    <td>
        <input type="button" value="详细信息" @click="xiang(item.id)" class="btn btn-primary">
        <input type="button" value="删除" @click="del(item.id)" class="btn btn-primary">
    </td>
    <td>

    </td>
</tr>
</table>
<div>
    <span>共{{info.pagecount}}页</span>
    <span>共{{info.count}}条</span>
    <span>当前{{tiao.index}}/{{info.pagecount}}页</span>
    <input type="button" value="首页" @click="fan(1)" class="btn btn-primary">
    <input type="button" value="上一页" @click="fan(tiao.index-1)" class="btn btn-primary">
    <span v-for="item in info.pagecount" @click="fan(item)">{{ [item] }}</span>
    <input type="button" value="下一页" @click="fan(tiao.index+1)" class="btn btn-primary">
    <input type="button" value="尾页" @click="fan(info.pagecount)" class="btn btn-primary">
    <select v-model="tiao.size" @change="show">
        <option :value=2>每页2条</option>
        <option :value=4>每页4条</option>
        <option :value=6>每页6条</option>
    </select>
</div>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, reactive, onMounted } from 'vue';
import moment from 'moment';
import { useRoute, useRouter } from 'vue-router';

let route = useRoute();
let router = useRouter();

onMounted(()=>{
    show();//显示页面信息
})

///////////////////////////////////////////////////////////////////////////////////////
//显示信息
let info:any = reactive({
    list: [],
    count: 0,
    pagecount:0
});
//查询条件
let tiao:any=reactive({
    index:1,
    size:2,
})
/////////////////////////////////函数/////////////////////////////////////////////////////
//显示数据
const show=()=>{
    axios({
        url:'https://localhost:7080/api/PaiRoom/GetPai',
        params:tiao,
        method:'get'
    })
    .then(res=>{
        info.list=res.data.list;
        info.count=res.data.count;
        info.pagecount=res.data.pagecount;
    })
}
//翻页
const fan=(e:any)=>{
if(e<1){
tiao.index=1;
}else if(e>info.pagecount){
tiao.index=info.pagecount;
}else{
    tiao.index=e;
}
show();
}

//排房跳转
const xiang=(id:any)=>{
router.push({
    query:{id:id},
    path:'/InfopaiRoom'
})
}

//删除
const del=(id:any)=>{
    if(!confirm('确认删除吗?')){
return;
    }
axios({
    url:'https://localhost:7080/api/PaiRoom/DelPai',
    params:{id:id},
    method:'delete'
})
.then(res=>{
    if(res.data>0){
alert('删除成功');
    }else{
        alert('删除失败')
    }
    show();
})
}

//gitee

</script>

<style scoped>

</style>